<script setup lang="ts">
import { ref } from 'vue'

const toggle = ref(true)
</script>

<template>
  <div class="clip-path-basic__container">
    <div class="container" :class="{ expand: toggle }"></div>
    <button @click="toggle = !toggle">Toggle</button>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 200px;
  height: 200px;
  border: 1px solid rgb(19, 107, 184);
  background-color: red;
  clip-path: circle(0% at 100% 0%); /* 初始状态，圆形半径为 0% */
  transition: clip-path 1s ease; /* 定义过渡效果 */

  &.expand {
    clip-path: circle(100% at 100% 0%);
  }
}
</style>
